<template>
  <div class="searchResult">
    <div class="wrapper">
      <!-- 头部 star  -->
      <div class="header">
        <div class="header_left">
          <router-link tag="a" :to="this.routesId"
            ><img
              :src="require('../assets/img/bar_icon_back_black.png')"
              alt=""
          /></router-link>
        </div>
        <div class="header_center">
          {{ this.resultname }}
        </div>
        <div class="header_right">
          <router-link tag="a" :to="'/classification?old='+ this.routesId+'&name='+this.resultname"
            >分类</router-link
          >
        </div>
      </div>
      <!-- 头部 end   -->
      <!-- 主体部分 star  -->
      <div class="main" v-if="!(this.result.length==0)">
        <ul>
          <li v-for="item in result" :key="item.id" @click="listId(null,item.id)">
            <a>
              <div class="img">
                <img :src="item.img" alt="" />
                <div class="vip"></div>
              </div>
              <div class="word">
                <p>{{ item.name }}</p>
                <div class="tip">
                  <p>经典...</p>
                  <p>175555次</p>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <!-- 主体部分 end  -->

      <!-- 没有内容 star -->
      <div class="null" v-if="(this.result.length==0)">
        <img :src="require('../assets/img/iv_mei_neirong.png')" alt="" />
        <p>暂无记录哦~</p>
      </div>
      <!-- 没有内容 end -->
    </div>
  </div>
</template>

<script>
export default {
  props: ["result"],
  data() {
    return {
      resultname: "",
      routesId: "",
      // resulter:this.result,
    };
  },
  methods: {
    listId(id,listenId){
      this.$emit("list-id",[id,listenId])
    },
  },
  created() {
    this.resultname = this.$route.query.name;
    this.routesId = this.$route.query.id;
    
  },
};
</script>

<style lang="scss" scoped>
.searchResult {
  background-color: #f4f4f4;
  height: 100%;
  .wrapper {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    .null{
        text-align: center;
        transform: translateY(100%);
        img{
            width: 150px;
            
        }
        p{
            margin-top: 20px;
            font-size: 26px;
            color: #555555;
        }
    }
    .header {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      padding: 0 16px;
      position: sticky;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .header_left {
      img {
        height: 20px;
        display: block;
      }
    }
    .header_center {
      font-size: 18px;
      font-weight: 500;
    }
    .header_right {
      a {
        color: #3e3e3e;
        font-size: 17px;
        font-weight: 600;
      }
    }
    .main {
      padding: 0 16px;
      ul {
        li {
          padding: 7px 0;
          a {
            display: flex;
          }
          .img {
            position: relative;
            img {
              height: 96px;
              border-radius: 8px;
              display: block;
            }
          }
          .word {
            color: #141414;
            padding-left: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            & > p {
              height: 44px;
              line-height: 44px;
            }
            .tip {
              font-size: 12px;
              display: flex;
              color: #999;
            }
          }
          .tip {
            p {
              &:nth-child(1) {
                padding: 0 8px 0 16px;
                background: url(../assets/img/xiao.png) left center no-repeat;
                background-size: 13px;
              }
              &:nth-child(2) {
                padding-left: 16px;
                background: url(../assets/img/ic_listen_gray.webp) left center
                  no-repeat;
                background-size: 13px;
              }
            }
          }
        }
      }
    }
    /* .main ul{} */
  }
}
</style>